<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>服务项目确认</title>
    <meta name="description" content="">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/mui.picker.min.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="mui-page" id="qcyh-confirm-wrap">
        <!--页面主内容区开始-->
        <div class="mui-page-content">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view">
                        <div class="mui-table-view-cell table-title">服务门店</div>
                        <li class="mui-table-view-cell mui-left mid">
                            <i class="color1 iconfont text-size1 mid">&#xe695;</i>
                            <span class="mid">无锡嘉宝汽修</span>
                            <span class="mui-right-text3">
                                 <a href="tel:0000000" class="color1 text-size1 iconfont mid">&#xe6c9;</a>
                            </span>
                        </li>
                        <li class="mui-table-view-cell mui-left mid">
                            <i class="color1 iconfont text-size1 mid">&#xe60e;</i>
                            <span class="mid color4">无锡市新吴区塘南路121号</span>
                        </li>
                    </ul>
                    <ul class="mui-table-view">
                        <div class="mui-table-view-cell table-title">预约日期</div>
                        <div class="mui-input-row">
                            <div class="input-icon">
                                <i class="color1 iconfont text-size1">&#xe60d;</i>
                            </div>
                            <div class="input-box">
                                <input type="text" placeholder="到店日期" id="timeInput" data-options='{"type":"date","beginYear":2017,"endYear":2017}' msg="到店日期">
                            </div>
                        </div>
                    </ul>
                    <ul class="mui-table-view mui-input-group">
                        <div class="mui-table-view-cell table-title">联系人信息</div>
                        <div class="mui-input-row">
                            <div class="input-icon">
                                <i class="color1 iconfont text-size1">&#xe67b;</i>
                            </div>
                            <div class="input-box">
                                <input type="text" placeholder="请输入联系人姓名" class="mui-input-clear" msg="联系人姓名">
                            </div>
                        </div>
                        <div class="mui-input-row">
                            <div class="input-icon">
                                <i class="color1 iconfont text-size1">&#xe694;</i>
                            </div>
                            <div class="input-box">
                                <input type="tel" pattern="[0-9]*" class="mui-input-clear" maxlength="11" placeholder="请输入联系人手机" msg="联系人手机">
                            </div>
                        </div>
                    </ul>
                    <ul class="mui-table-view mui-input-group">
                        <div class="mui-table-view-cell table-title">备注</div>
                        <div class="mui-input-row" style="height: 100px;">
                            <textarea id="textarea" rows="5" placeholder="请输入维修要求" style="position: absolute; top:0"></textarea>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <!--页面主内容区结束-->
    </div>
    <div id="qcyh-price">
        <div class="price-wrap">
            <span class="mui-text-left text-size3">总计</span>
            <span class="mui-text-right color3 mui-pull-right">
                <span>￥</span><span class="text-size1" id="price-text">0.00</span>
            </span>
        </div>
        <div class="next-btn" onclick="return checkNull()">确认预约</div>
    </div>
    <script src="js/mui.min.js"></script>
    <script src="js/mui.picker.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
        //mui初始化
        mui.init({
            swipeBack: false
        });
        //上拉下拉设置
        (function($) {
            $('.mui-scroll-wrapper').scroll({
                indicators: true //是否显示滚动条
            });
            //时间插件
            var btn = $('#timeInput')[0];
            btn.addEventListener('tap', function(event) {
                event.preventDefault();
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var id = this.getAttribute('id');
                var picker = new $.DtPicker(options);
                picker.show(function(rs) {
                    btn.value = rs.text;
                    picker.dispose();
                });
            }, false);
        })(mui);

        //表单操作
        //页面跳转
        function checkNull() {
            var aInput = $("#qcyh-confirm-wrap input");
            var num = 0;
            var str = '';
            aInput.each(function() {
                if($(this).val() == "") {
                    num++;
                    str = '请完善信息';
                }
            });
            if(num>0){
                mui.alert(str);
                return false;
            } else {
                window.location.href = 'qcyh-success.html'
                return true;
            }
        }
    </script>
</body>
</html>